<template>
  <article class="page">
    <headerbar>我的关注</headerbar>
    <section class="frame-content-sub no-bg">
      <div class="block">
        <div class="person-head">
          <div class="avatar">
            <div v-if="!myFollow.photo" class="avatar-img">
              <img
                src="../../../../static/images/dangjian/home/water-logo.png"
                alt=""
              />
            </div>
            <!--<div v-if="!sysFile.url || sysFile.url === '' ||" class="avatar-img"><img src="../../../../static/images/dangjian/home/water-logo.png" alt=""></div>-->
            <div v-if="myFollow.photo" class="avatar-img">
              <img :src="showImg(myFollow.photo, true)" alt="" />
            </div>
            <div class="text-wrap">
              <h1 class="name">{{ nickName || myFollow.fullname }}</h1>
              <div class="tip"></div>
            </div>
          </div>
          <div v-if="false" class="arrow">
            <i class="icon-arrow"
              ><img
                src="../../../../static/images/dangjian/dangwu/arrow-left.png"
                alt=""
            /></i>
          </div>
        </div>
        <section v-if="false" class="">
          <ul class="tab noborder">
            <li @click="alertDialog()"><span>取消关注</span></li>
          </ul>
        </section>
      </div>

      <div class="block">
        <div class="videos-wrap">
          <div class="bd">
            <fetchData :loading="isLoading" :data="myFollows"></fetchData>
            <!--<cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div class="" v-for="(data,index) in smallVideoOwns" :key="index">
                    <cube-swipe-item
                      ref="swipeItem"
                      :index="index">
                      <div class="video-item">
                        <img src="../../../../static/images/dangjian/home/water-logo.png" alt="">
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <div class="text-center no-data" v-if="smallVideoOwns.length===0">
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div>
            </cube-scroll>-->
            <div
              class="video-item"
              v-for="(data, index) in smallVideoOwns"
              :key="index"
              @click="playVideo(data)"
            >
              <div class="img">
                <img
                  v-if="!data.listPic || data.listPic === ''"
                  src="../../../../static/images/dangjian/home/water-logo.png"
                  alt=""
                />
                <img
                  v-if="data.listPic && data.listPic !== ''"
                  :src="tools.getImgUrl(data.listPic, true)"
                  alt=""
                />
              </div>
              <span class="name">{{ data.title }}</span>
            </div>
            <div
              class="text-center no-data"
              v-if="!isLoading && smallVideoOwns.length === 0"
            >
              <img src="../../../../static/images/no_data.png" alt="" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </article>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
export default {
  name: "microVideo",
  data() {
    return {
      isLoading: true,
      onBottom: false, // W onBottom
      smallVideoOwns: [],
      myFollow: {},
      nickName: "",
    };
  },
  created() {
    this.myFollow = this.$localStorage.get("myFollow");
    this.getMyVideos();
    this.getUserInfo(this.myFollow.userId);
  },
  methods: {
    getMyVideos() {
      this.isLoading = true;
      let params = {
        userId: this.myFollow.userId,
      };
      this.fetchService.smallVideoOwn(params).then((res) => {
        this.isLoading = false;
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.smallVideoOwns = res.data;
      });
    },
    getUserInfo(userId) {
      this.fetchService.getUserInfo(userId).then((res) => {
        if (res.userId) {
          this.userInfo = res;
          if (res.qq && res.qq !== "") {
            this.nickName = res.qq;
          } else if (res.fullname && res.fullname !== "") {
            this.nickName = res.fullname;
          } else if (res.nickname && res.nickname !== "") {
            this.nickName = res.nickname;
          }
          this.loginNew(res.userNo);
        }
      });
    },
    loginNew(username) {
      this.fetchService.loginNew({ username }).then((res) => {
        if (res.code === 0) {
          this.userInfo = res.data;
          this.nickName =
            this.userInfo.qq ||
            this.userInfo.nickname ||
            this.userInfo.fullname;
        }
      });
    },
    showImg(fileId) {
      let fileUrl = this.tools.getImgUrl(fileId);
      console.log("-------------fileUrl=", fileUrl);
      return fileUrl;
    },
    unFollow() {
      this.fetchService.cancelWatch(this.myFollow.userId).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        tools.tip("取消关注成功");
        tools.back();
      });
    },
    alertDialog() {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        // icon: "cubeic-alert",
        title: "温馨提示",
        content: "确定取消关注吗？",
        confirmBtn: {
          text: "确定",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.unFollow();
        },
        onCancel: () => {},
      }).show();
    },
    playVideo(item, index) {
      this.$store.state.newsDetail = item;
      console.log("newsDetail", item);
      this.tools.showLoading();
      this.fetchVideoDetail(item).then((data) => {
        console.log("data", data);
        this.tools.hideLoading();
        this.$store.state.newsDetail.detail = data;
        this.$createVideoPlayerComponent({
          $props: {
            videoUrl: this.tools.getImgUrl(data.files[0].fileId),
          },
        }).show();
      });
    },
    fetchVideoDetail(item) {
      return this.fetchService.contentPageDetail(item.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
